<script>
import { loginAjax } from '@/data/UserinfoData'

export default {
  name: 'LoginView',
  data () {
    return {
      loginData: {
        username: '',
        password: '',
        code: 'code'
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空' }
        ],
        password: [
          { required: true, message: '密码不能为空' }
        ],
        code: [
          { required: true, message: '验证码不能为空' }
        ]
      }
    }
  },
  methods: {
    login () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          const res = loginAjax(this.loginData)
          if (res.code === 200) {
            this.$message.success('登录成功')
            // sessionStorage.setItem('xhxy', '徐海学院')
            // console.log(res.data)
            // const jsonStr = JSON.stringify(res.data)// 对象转json
            // console.log(jsonStr)
            // const jsonObj = JSON.parse(jsonStr)
            // console.log(jsonObj)

            sessionStorage.setItem('loginInfo', JSON.stringify(res.data))
            this.$router.replace('/home')
          } else {
            this.$alert(res.msg, { type: 'error' })
          }
        }
      })
    }
  }
}
</script>

<template>
<div class="content">
  <div class="login-form" @keydown.enter="login">
    <h2>饿了么后台管理登录</h2>
    <el-form :model="loginData" :rules="rules" label-width="80px" ref="loginForm">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginData.username" clearable placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginData.password" show-password clearable placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="loginData.code" clearable placeholder="请输入验证码">
          <template slot="append">
            <img class="code-img" src="https://dummyimage.com/200x80/FAA60" alt="验证码">
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>
<style>
.el-input-group__append{
  height: 40px;
  width: 200px;
  padding: 0;
}
</style>
<style scoped>
.content{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: url("@/assets/login-bg.jpg") no-repeat center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content .login-form{
  height: 45%;
  width: 35%;
  padding: 10px 20px;
  background: rgba(255,255,255,.4);
  border-radius: 10px;
}
.content .login-form h2{
  text-align: center;
}
.content .login-form .code-img{
  display: block;
  height: 100%;
  width: 100%;
}
</style>
